<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { articleShowListService } from '@/api/admin/article.js';
import useUserInfoStore from "@/stores/userinfo.js";
const userInfoStore = useUserInfoStore();

const router = useRouter();
const articleList = ref([]);
const id = ref(userInfoStore.info.schoolId);

// 初始化文章列表
const fetchArticles = async (id) => {
  try {
    const result = await articleShowListService(id);
    articleList.value = result.data;
  } catch (error) {
    console.error("Failed to fetch articles:", error);
  }
};

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${month}-${day}`;
};

onMounted(() => {
  if (id.value) {
    fetchArticles(id.value);
  }
});

const showText = (item) => {
  // console.log('Item ID:', item.id);
  router.push(`/blog/text/${item.id}`);
};

</script>
<template>
  <div v-if="!articleList || articleList.length === 0" class="no-articles">
    <img src="@/assets/images/noArticle.png" alt="No Articles" class="no-articles-icon">
    <h2>暂无文章</h2>
    <p>当前没有发布的文章，请稍后再来查看。</p>
  </div>
    <el-card class="box-card" style="margin-bottom: 20px;" v-for="item in articleList">
      <img :src=item.coverImg class="card-img-top" style="height: 120px;width: 160px;object-fit: cover;float: left;margin-right: 20px;" alt="...">
      <div class="card-body">
        <div class="card-title" style="font-size: 20px;color: black;cursor: pointer;"
             @click="showText(item)">{{item.title}}</div>
        <p class="card-text" style="font-size: 14px;color: rgb(125, 126, 138);height: 40px;overflow: hidden">
          {{item.summary}}</p>
      </div>
      <div class="card-footer" style="margin-bottom: 40px;font-size: 15px">
        <div class="card-footer-left" style="float: left;">
          <span style="color: #999999;padding-right: 20px;vertical-align: middle">{{formatDate(item.updateTime)}}</span>
          <img :src=item.userPic style="width: 20px;vertical-align: middle;margin: 5px;border-radius: 5px">
          <span style="color: #999999;vertical-align: middle">
            {{ item.nickname }}
          </span>
        </div>
        <div class="card-footer-right" style="float: right">
          <span style="color: #999999;margin-right: 20px;vertical-align: middle">
            100阅读
          </span>
          <span style="color: #999999;margin-right: 10px;vertical-align: middle">
            <img src="@/assets/icon/thumbs_up.png" style="width: 19px;margin-right: 5px;top: 20px;"></span>
          <span style="color: #999999;vertical-align: middle">
            <img src="@/assets/icon/collection.png" style="width: 22px;margin-right: 5px">
          </span>
        </div>
      </div>
    </el-card>

</template>

<style scoped>
.no-articles {
  text-align: center;
  padding: 50px 0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.no-articles-icon {
  width: 30%;
  margin-bottom: 20px;
}

.no-articles h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.no-articles p {
  font-size: 16px;
  color: #666;
}
</style>
